<template>
    <div id="v-left">
        <el-row class="e-row" type="flex" justify="space-between">
            <!-- 人员汇总 -->
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="c-mb20">
                <div class="pro-t"></div>
                <div class="pro-l"></div>
                <div class="pro-r"></div>
                <div class="pro-b"></div>
                <div class="t-c"></div>
                <div class="cont-c">
                    <div class="i-c">
                        <img src="../image/team_icon.png" />
                    </div>
                    <!-- <span>人员总览</span> -->
                    <span>工种类型</span>
                </div>
                <v-left-top
                    :letTopData="letTopData"
                />
            </el-col>

            <!-- 车辆进出 -->
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="c-mb20">
                <!-- <div class="pro-t"></div>
                <div class="pro-l"></div>
                <div class="pro-r"></div>
                <div class="pro-b"></div>
                <div class="t-c"></div> -->
                <div class="cont-c">
                    <div class="i-c">
                        <img src="../image/team_icon.png" />
                    </div>
                    <span>风险分析</span>
                </div>
                <v-left-center 
                    :leftCenterData="leftCenterData"
                />
            </el-col>

            <!-- 巡检不良 -->
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="c-mb20">
                <!-- <div class="pro-t"></div>
                <div class="pro-l"></div>
                <div class="pro-r"></div>
                <div class="pro-b"></div>
                <div class="t-c"></div> -->
                <div class="cont-c">
                    <div class="i-c">
                        <img src="../image/team_icon.png" />
                    </div>
                    <span>单日巡检违规数量</span>
                </div>
                <v-left-btn 
                    :leftBtnData="leftBtnData"
                />
            </el-col>

        </el-row>
    </div>
</template>
<script lang="ts">
import { defineComponent, ref, Ref, onMounted , nextTick, reactive, watchEffect, toRaw } from 'vue';
import VLeftTop from './e-component/v-left/v-left-t.vue';
import VLeftCenter from './e-component/v-left/v-left-c.vue';
import VLeftBtn from './e-component/v-left/v-left-b.vue';
export default defineComponent( {
    name:'v-left',
    components: {
        VLeftTop,
        VLeftCenter,
        VLeftBtn
    },
    props: {
        totalData: {
            type: Object,
            default: {}
        }
    },
    setup(props){
        const letTopData = ref();
        const leftCenterData = ref();
        const leftBtnData = ref();
        watchEffect(() => {
            let getData = props.totalData;
            if(Object.keys(getData).length !== 0){
                letTopData.value = JSON.stringify(getData.empAttendance);
                leftCenterData.value = JSON.stringify(getData.riskAnalysis);
                leftBtnData.value = JSON.stringify(getData.checkNGChar);
                console.log(getData,'getData')
            }
        });
        onMounted(() => {
            nextTick(() => {})
        })
        return {
            letTopData,
            leftCenterData,
            leftBtnData,
        }
    }
})
</script>
<style lang="scss"> @import '../style/echarts.scss'; </style>
<style lang="scss" scoped>
#v-left{
    height: 100%;
    .e-row{
        display: flex;
        height: 100%;
        .c-mb20{
            height: 32.4%;
            position: relative;
            background-color: transparent; /* 透明背景 */
            overflow: hidden; /* 隐藏超出部分 */
            .t-c,.cont-c{
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 40px;
            }
            .t-c{ z-index: 1 }
            .cont-c{
                z-index: 2;
                display: flex;
                align-items: center;
                .i-c{
                    margin: 0 8px;
                    width: 15px;
                    height: 15px;
                    img{
                        display: block;
                        width: 100%;
                        height: 100%;
                    }
                }
                span{
                    display: block;
                }
            }
            .pro-t,.pro-l,.pro-r,.pro-b{
                position: absolute;
                z-index: 0;
            }
            .pro-t,.pro-b{
                width: 100%;
                height: 1px;
                left: 0;
            }
            .pro-l,.pro-r{
                height: 100%;
                width: 1px;
                top: 0;
            }
            .pro-t{ top: 0; }
            .pro-b{ bottom: 0; }
            .pro-l{ left: 0; }
            .pro-r{ right: 0; }
        }
    }
}
</style>